<template>
  <div class="search-bar">
    <div class="select-bar">
      <div class="select-item">
        <label for="code-input">编码：</label>
        <input
          id="code-input"
          placeholder="输入编码"
          v-model="queryInfo.code"
          class="input-field"
        />
      </div>

      <div class="select-item">
        <label for="name-input">名称：</label>
        <input
          id="name-input"
          placeholder="输入名称"
          v-model="queryInfo.name"
          class="input-field"
        />
      </div>

      <el-button type="primary" @click="getGongYing()" class="search-button">
        <i class="fas fa-search"></i>查询
      </el-button>
      <el-button type="default" @click="handleReset" class="reset-button">
        <i class="fas fa-undo"></i>重置
      </el-button>
      <el-button type="default" @click="toggleExpand" class="toggle-button">
        {{ isExpanded ? "收起" : "展开" }}
        <i :class="isExpanded ? 'fas fa-angle-up' : 'fas fa-angle-down'"></i>
      </el-button>
      <div v-if="isExpanded" class="expand-content">
        <!-- 可以放置任何您想要的信息。 -->
      </div>
    </div>

    <div class="xinzeng">
      <el-button type="text" @click="addShowInit()"
        ><i class="fas fa-plus"></i>新增</el-button
      >
      <el-button type="text" @click="exportExcel"
        ><i class="el-icon-download"></i>导出</el-button
      >
      <!-- <el-button type="text"><i class="fas fa-file-import"></i>导入</el-button> -->
      <el-upload
        action
        :show-file-list="false"
        :on-change="importExcel"
        :auto-upload="false"
      >
        <el-button icon="upload" type="text" size="small"
          ><i class="fas fa-file-import"></i>导入</el-button
        >
      </el-upload>
    </div>

    <el-table :data="list" border style="width: 100%">
      <el-table-column label="#" type="index" width="50"></el-table-column>
      <el-table-column label="编码" prop="code"></el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="简称" prop="shortName"></el-table-column>
      <el-table-column
        label="等级"
        prop="supplierLevel_dictText"
      ></el-table-column>
      <el-table-column
        label="纳税规模"
        prop="taxScale_dictText"
      ></el-table-column>
      <el-table-column label="所属地区" prop="address"></el-table-column>
      <el-table-column label="业务地域" prop="bizArea"></el-table-column>
      <el-table-column label="所属总公司" prop="headquarters"></el-table-column>
      <el-table-column label="是否启用" prop="isEnabled"></el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            style="color: #1890ff"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <span style="color: #bbb; margin-right: 3px">|</span>
          <el-dropdown size="small">
            <span class="el-dropdown-link" style="color: #1890ff">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-button
                size="mini"
                type="text"
                style="color: rgba(0, 0, 0, 0.65); margin: 0 5px"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加或者修改募捐团队模态框 -->
    <el-dialog
      :title="id ? '供应商 - 编辑' : '供应商 - 新增'"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :model="listForm"
        :rules="rules"
        ref="listForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="编码" prop="code">
              <el-input v-model="listForm.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="name">
              <el-input v-model="listForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="简称" prop="shortName">
              <el-input v-model="listForm.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="等级" prop="supplierLevel">
              <el-input v-model="listForm.supplierLevel"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="纳税规模" prop="taxScale">
              <el-input v-model="listForm.taxScale"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属总公司" prop="headquarters">
              <el-input v-model="listForm.headquarters"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属地区" prop="area">
              <el-input v-model="listForm.area"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务地域" prop="bizArea">
              <el-input v-model="listForm.bizArea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备选供应商" prop="alterSupplier">
              <el-input v-model="listForm.alterSupplier"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="网站" prop="website">
              <el-input v-model="listForm.website"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="法人代表" prop="corporate">
              <el-input v-model="listForm.corporate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人电话" prop="corporatePhone">
              <el-input v-model="listForm.corporatePhone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商地址" prop="address">
              <el-input v-model="listForm.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="财务信息联系人" prop="contactsFinancial">
              <el-input v-model="listForm.contactsFinancial"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="财务信息联系电话" prop="phoneFinancial">
              <el-input v-model="listForm.phoneFinancial"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开票信息单位名称" prop="unitInvoice">
              <el-input v-model="listForm.unitInvoice"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开票信息开户行" prop="bankInvoice">
              <el-input v-model="listForm.bankInvoice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开票信息行号" prop="bankidInvoice">
              <el-input v-model="listForm.bankidInvoice"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开票信息税号" prop="taxInvoice">
              <el-input v-model="listForm.taxInvoice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开票信息联系电话" prop="phoneInvoice">
              <el-input v-model="listForm.phoneInvoice"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开票信息账号" prop="accountInvoice">
              <el-input v-model="listForm.accountInvoice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开票地址" prop="addressInvoice">
              <el-input v-model="listForm.addressInvoice"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="办款资料单位名称" prop="unitPayment">
              <el-input v-model="listForm.unitPayment"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="办款资料开户行" prop="bankPayment">
              <el-input v-model="listForm.bankPayment"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="办款资料行号" prop="bankidPayment">
              <el-input v-model="listForm.bankidPayment"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="办款资料账号" prop="accountPayment">
              <el-input v-model="listForm.accountPayment"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收件信息地址" prop="accountReceipt">
              <el-input v-model="listForm.accountReceipt"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收件信息邮编" prop="postcodeReceipt">
              <el-input v-model="listForm.postcodeReceipt"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收件信息收件人" prop="addressReceipt">
              <el-input v-model="listForm.addressReceipt"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收件信息联系电话" prop="phoneReceipt">
              <el-input v-model="listForm.phoneReceipt"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收件信息传真" prop="faxReceipt">
              <el-input v-model="listForm.faxReceipt"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" prop="isEnabled">
              <el-input v-model="listForm.isEnabled" sortable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="listForm.remark"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="附件" prop="attachment">
              <el-upload
                action
                :show-file-list="false"
                :on-change="importExcel"
                :auto-upload="false"
              >
                <el-button icon="upload" type="text" size="small"
                  ><i class="fas fa-file-import"></i>导入</el-button
                >
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建人" prop="createBy">
              <el-input v-model="listForm.createBy" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker
                type="datetime"
                v-model="listForm.createTime"
                placeholder="选择创建时间"
                prop="createTime"
                disabled
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="修改人" prop="updateBy">
              <el-input v-model="listForm.updateBy" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="修改时间" prop="updateTime">
              <el-date-picker
                type="datetime"
                v-model="listForm.updateTime"
                placeholder="选择修改时间"
                disabled
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="btns">
          <el-button @click="resetForm('listForm')" style="margin-right: 10px"
            >取消</el-button
          >
          <el-button
            v-if="id"
            type="primary"
            style="background-color: #17b3a3; border: none"
            @click="editForm('listForm')"
            >确定</el-button
          >
          <el-button
            v-else
            type="success"
            style="background-color: #17b3a3; border: none"
            @click="addForm('listForm')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <pagination
      :page="queryInfo.pageNo"
      :componentTotal="total"
      @changeRows="setPageSize"
      @changePage="setPageNo"
    ></pagination>
  </div>
</template>

<script>
import { Button } from "element-ui";
import axios from "axios";
import Pagination from "../Pagination.vue";
import { excelExportUseJson, excelImport } from "../../assets/js/xlsx";

export default {
  components: {
    "el-button": Button,
    Pagination,
  },
  data() {
    return {
      search1: "", // 用于存储编码
      search2: "", // 用于存储名称
      isExpanded: false, // 控制展开/收起的状态
      queryInfo: {
        _t: "",
        column: "createTime",
        order: "desc",
        field:
          "id,,,code,name,shortName,supplierLevel_dictText,taxScale_dictText,area,bizArea,headquarters,isEnabled,action",
        pageNo: 1,
        pageSize: 10,
      },
      list: [],
      total: 0, // 用于存储总数
      loading: false, // 加载状态
      listHeader: {
        code: "编码",
        name: "名称",
        shortName: "简称",
        supplierLevel_dictText: "等级",
        taxScale_dictText: "纳税规模",
        supplierCategory: "供应商分类",
        headquarters: "所属总公司",
        area: "所属地区",
        bizArea: "业务区域",
        alterSupplier: "备选供应商",
        website: "网站",
        corporate: "法人代表",
        corporatePhone: "法人电话",
        address: "供应商地址",
        contactsFinancial: "财务信息联系人",
        phoneFinancial: "财务信息联系电话",
        unitInvoice: "开票信息单位名称",
        bankInvoice: "开票信息开户行",
        bankidInvoice: "开票信息行号",
        taxInvoice: "开票信息税号",
        phoneInvoice: "开票信息联系电话",
        accountInvoice: "开票信息账号",
        addressInvoice: "开票地址",
        unitPayment: "办款资料单位名称",
        bankPayment: "办款资料开户行",
        bankidPayment: "办款资料行号",
        accountPayment: "办款资料账号",
        accountReceipt: "收件信息地址",
        postcodeReceipt: "收件信息邮编",
        addressReceipt: "收件信息收件人",
        phoneReceipt: "收件信息联系电话",
        faxReceipt: "收件信息传真",
        attachment: "附件",
        remark: "备注",
        isEnabled: "是否启用",
        createBy: "创建人",
        cretateTime: "创建时间",
        updateBy: "修改人",
        updateTime: "修改时间",
        version: "版本",
      },
      listForm: {
        accountInvoice: "",
        accountPayment: "",
        accountReceipt: "",
        address: "",
        addressInvoice: "",
        addressReceipt: "",
        alterSupplier: "",
        area: "",
        attachment: "",
        bankInvoice: "",
        bankPayment: "",
        bankidInvoice: "",
        bankidPayment: "",
        bizArea: "",
        code: "",
        contactsFinancial: "",
        corporate: "",
        corporatePhone: "",
        faxReceipt: "",
        headquarters: "",
        isEnabled: "",
        name: "",
        phoneFinancial: "",
        phoneInvoice: "",
        phoneReceipt: "",
        postcodeReceipt: "",
        remark: "",
        shortName: "",
        supplierLevel: "",
        taxInvoice: "",
        taxScale: "",
        unitInvoice: "",
        unitPayment: "",
        website: "",
      },
      dialogFormVisible: false,
      id: null,
      rules: {
        code: [{ required: true, message: "请输入随访编码", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getGongYing(); // 在组件加载时获取数据
  },
  methods: {
    // 添加任务
    addShowInit() {
      this.dialogFormVisible = true;
      this.id = null;
      this.listForm = {
        code: "",
        name: "",
        shortName: "",
        taxScale: "",
        supplierLevel: "",
        headquarters: "",
        area: "",
        bizArea: "",
        alterSupplier: "",
        website: "",
        corporate: "",
        corporatePhone: "",
        address: "",
        contactsFinancial: "",
        phoneFinancial: "",
        unitInvoice: "",
        bankInvoice: "",
        bankidInvoice: "",
        taxInvoice: "",
        phoneInvoice: "",
        accountInvoice: "",
        addressInvoice: "",
        unitPayment: "",
        bankPayment: "",
        bankidPayment: "",
        accountPayment: "",
        accountReceipt: "",
        attachment: "",
        addressReceipt: "",
        phoneReceipt: "",
        faxReceipt: "",
        isEnabled: "",
        postcodeReceipt: "",
        remark: "",
        createBy: "",
        createTime: "",
        updateBy: "",
        updateTime: "",
        version: "",
      };
    },
    addForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return false;
        await this.axios
          .post(
            "http://8.142.74.15:48082/jeecg-boot/bas/basSupplier/add",
            this.listForm
          )
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
        // if (res.code != 0) return this.$message.error("添加任务失败");
        // this.$message.success("添加任务成功");
        this.dialogFormVisible = false;
        this.getGongYing();
      });
    },
    // 编辑任务handleExceed
    async handleEdit(row) {
      this.listForm = { ...row };
      this.dialogFormVisible = true;
      this.id = row.id;
    },
    editForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return false;
        const { data: res } = await this.axios.put(
          "http://8.142.74.15:48082/jeecg-boot/bas/basSupplier/edit",
          this.listForm
        );
        if (res.code != 200) return this.$message.error("修改任务失败");
        this.$message.success("修改编辑成功");
        this.dialogFormVisible = false;
        this.getGongYing();
      });
    },
    //取消重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false;
    },
    // 删除任务
    handleDelete(row) {
      console.log(row);
      this.$confirm("是否删除该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteSamplereport(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async deleteSamplereport(id) {
      // this.id.push(id);
      await this.axios
        .delete(
          `http://8.142.74.15:48082/jeecg-boot/bas/basSupplier/delete?id=${id}`
        )
        .then((res) => {
          console.log(res);
          this.getGongYing();
          window.location.reload();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 导出
    exportExcel() {
      excelExportUseJson(this.list, this.listHeader, "供应商信息表");
    },
    // 导入
    importExcel(file) {
      console.log(file);
      excelImport(file.raw, "json").then((res) => {
        res = res.map((item) => {
          let newUserFrom = {};
          for (let [headerKey, headerVal] of Object.entries(this.listHeader)) {
            newUserFrom[headerKey] = item[headerVal];
          }
          newUserFrom.passWord = "123456";
          return newUserFrom;
        });
        console.log(res);
      });
    },
    // 查询列表
    async getGongYing() {
      this.loading = true; // 设置加载状态
      this.queryInfo._t = new Date().getTime(); // 防止缓存
      try {
        const { data: res } = await axios.get(
          "http://8.142.74.15:48082/jeecg-boot/bas/basSupplier/list",
          {
            params: this.queryInfo,
          }
        );

        if (res.code !== 200) {
          this.$message.error("获取任务管理列表失败");
          return;
        }
        this.list = res.result.records; // 获取记录
        this.total = res.result.total; // 获取总数
      } catch (error) {
        console.error("Error fetching data:", error);
        this.$message.error("请求数据失败，请重试。");
      } finally {
        this.loading = false; // 取消加载状态
      }
    },
    // 分页器
    setPageSize(val) {
      this.queryInfo.pageSize = val;
      this.getGongYing();
    },
    setPageNo(val) {
      this.queryInfo.pageNo = val;
      this.getGongYing();
    },
    handleReset() {
      this.search1 = "";
      this.search2 = "";
      this.queryInfo.code = "";
      this.queryInfo.name = "";
      this.queryInfo.pageNo = 1;
      this.queryInfo.pageSize = 10;
      this.getGongYing();
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>

<style scoped>
.search-bar {
  height: 100%;
  margin: 0;
  padding: 8px 24px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  transition: all 0.3s;
  border-radius: 2px;
}

.select-bar {
  display: flex;
  align-items: center;
}

.select-item {
  display: flex;
  align-items: center;
  padding: 0 12px;
  width: 384px;
}

label {
  width: 49px;
  color: #000;
  margin-right: 8px;
}

.input-field {
  width: 335px;
  height: 22px;
  padding: 4px 11px;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  transition: border-color 0.3s; /* 边框颜色变化过渡 */
  outline: none; /* 移除默认轮廓 */
}

/* 输入框鼠标悬停效果 */
.input-field:hover {
  border-color: #409eff; /* 悬停时边框颜色 */
}

/* 输入框获得焦点时的样式 */
.input-field:focus {
  border-color: #409eff; /* 焦点时边框颜色 */
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5); /* 焦点时阴影 */
}

/* 按钮样式 */
.search-button,
.reset-button,
.toggle-button,
.submit-button {
  padding: 10px 15px; /* 内边距 */
  border-radius: 4px; /* 圆角 */
  transition: background-color 0.3s; /* 背景颜色变化过渡 */
}

/* 查询按钮 */
.search-button {
  background-color: #409eff; /* 主色调 */
  color: white; /* 字体颜色 */
  border: 1px solid #409eff;
  width: 82px;
  height: 32px;
  line-height: 12px;
}

/* 查询按钮悬停效果 */
.search-button:hover {
  background-color: #66b1ff; /* 悬停时背景色 */
  border-color: #66b1ff;
}

/* 重置按钮 */
.reset-button {
  background-color: #fff; /* 重置按钮背景 */
  color: rgba(0, 0, 0, 0.65); /* 字体颜色 */
  border: 1px solid #d9d9d9;
  width: 82px;
  height: 32px;
  line-height: 12px;
  margin-left: 8px;
  padding: 0 15px;
  transition: all 0.3s;
}

/* 重置按钮悬停效果 */
.reset-button:hover {
  background-color: #e6f7ff; /* 悬停时背景色 */
  border-color: #409eff;
  color: #409eff;
}

/* 提交按钮 */
.submit-button {
  background-color: #fff; /* 提交按钮背景 */
  color: rgba(0, 0, 0, 0.65); /* 字体颜色 */
  border: 1px solid #d9d9d9;
  width: 82px;
  height: 32px;
  line-height: 12px;
  margin-left: 8px;
  padding: 0 15px;
  transition: all 0.3s;
}

/* 提交按钮悬停效果 */
.submit-button:hover {
  background-color: #e6f7ff; /* 悬停时背景色 */
  border-color: #409eff;
  color: #409eff;
}

/* 图标样式 */
.search-button i,
.reset-button i,
.toggle-button i,
.submit-button i {
  margin-right: 5px; /* 图标与文本之间的间距 */
}
.toggle-button {
  border: none;
  background-color: #fff;
  color: #409eff;
}
/* xinzeng */
.xinzeng {
  display: flex;
  width: 300px;
  align-items: center;
}
.el-button {
  margin-right: 10px;
}
.el-button i {
  margin-right: 5px;
}
.shanchu:hover {
  background-color: #096ba0;
  color: #096dd9;
}
/* 展开内容的样式 */
/*.expand-content {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background-color: #f9f9f9;
} */
</style>
